<template>
	<view class="monitor-container">
		<view class="header" v-if="showHeader">
			<text class="title">视频监控</text>
			<button class="toggle-btn" @click="toggleHeader">{{ showHeader ? '隐藏' : '显示' }}</button>
		</view>
		
		<web-view 
			:src="videoUrl" 
			class="video-webview"
			@message="onMessage"
			@load="onLoad"
			@error="onError"
		></web-view>
		
		<view class="info" v-if="showHeader">
			<text class="info-text">{{ statusText }}</text>
		</view>
		
		<!-- 最小化的切换按钮 -->
		<view class="mini-toggle" v-if="!showHeader" @click="toggleHeader">
			<text>⚙️</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoUrl: './static/hls-player.html',
				showHeader: true,
				statusText: '正在加载 H5 播放器...'
			}
		},
		methods: {
			toggleHeader() {
				this.showHeader = !this.showHeader;
			},
			onLoad() {
				this.statusText = '✅ H5 播放器加载成功';
				console.log('Web-view loaded successfully');
			},
			onError(e) {
				this.statusText = '❌ 加载失败: ' + (e.detail && e.detail.errMsg ? e.detail.errMsg : '未知错误');
				console.error('Web-view error:', e);
			},
			onMessage(e) {
				console.log('Message from web-view:', e.detail.data);
				// 处理来自H5页面的调试信息
				if (e.detail.data && Array.isArray(e.detail.data)) {
					e.detail.data.forEach(msg => {
						if (msg.type === 'log') {
							console.log(`[H5] ${msg.message}`);
							// 更新状态显示最新的日志
							if (msg.level === 'error') {
								this.statusText = '❌ ' + msg.message;
							} else if (msg.level === 'success') {
								this.statusText = '✅ ' + msg.message;
							} else {
								this.statusText = msg.message;
							}
						}
					});
				}
			}
		},
		onLoad() {
			// 5秒后自动隐藏头部，提供更好的观看体验
			setTimeout(() => {
				this.showHeader = false;
			}, 5000);
		}
	}
</script>

<style>
.monitor-container {
	width: 100%;
	height: 100vh;
	background: #000;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 20rpx;
}

.header {
	background: #222;
	padding: 15rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1000;
	flex-shrink: 0;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
}

.title {
	font-size: 32rpx;
	color: #fff;
	background: #e64340;
	padding: 12rpx 24rpx;
	border-radius: 8rpx;
}

.toggle-btn {
	background: #007cba;
	color: #fff;
	border: none;
	padding: 8rpx 16rpx;
	border-radius: 6rpx;
	font-size: 24rpx;
}

.video-webview {
	flex: 1;
	width: 100%;
	background: #000;
	border-radius: 12rpx;
	overflow: hidden;
	min-height: 500rpx;
	max-height: 80vh;
}

.info {
	background: #333;
	padding: 15rpx 20rpx;
	flex-shrink: 0;
	border-radius: 8rpx;
	margin-top: 20rpx;
}

.info-text {
	color: #fff;
	font-size: 24rpx;
	text-align: center;
}

.mini-toggle {
	position: absolute;
	top: 40rpx;
	right: 40rpx;
	width: 80rpx;
	height: 80rpx;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	font-size: 36rpx;
	border: 2rpx solid #007cba;
}
</style>
